// Home and Community pages
// Homepage media queries
$home-small-breakpoint: rem-calc(650);
$home-medium-breakpoint: rem-calc(880);

@mixin small-home {
  @media (max-width: $home-small-breakpoint - rem-calc(1)) {
    @content;
  }
}

@mixin medium-home {
  @media (min-width: $home-small-breakpoint) and (max-width: $home-medium-breakpoint - rem-calc(1)) {
    @content;
  }
}

@mixin large-home {
  @media (min-width: $home-medium-breakpoint) {
    @content;
  }
}

@mixin section-left-margin {
  @media (min-width: 1040px) {
    margin-left: rem-calc(104);
  }
}

%section-heading {
  font-size: rem-calc(25);

  @include small-home {
    font-size: rem-calc(18);
  }
}

hr {
  border-color: $hab-gray-light;
  margin: rem-calc(90) auto;
  max-width: rem-calc(900);
  width: 80%;
}

// Hero
.hero {
  min-height: rem-calc(600);
  background: url('/images/graphics/hero-pattern.svg') no-repeat rem-calc(-100) 111%;
  background-size: rem-calc(730) auto;

  @include medium-home {
    background-position: rem-calc(-100) 118%;
    background-size: rem-calc(730) auto;
  }

  @include large-home {
    background-position: -16% 165%;
    background-position: calc(50% - rem-calc(400px)) 165%;
    background-size: auto;
  }

  & > .row {
    position: relative;
  }

  .cta-subtext a {
    color: $hab-orange-dark;
  }
}

.hero--content {
  margin: rem-calc(60) 0 rem-calc(400);

  @media (max-width: rem-calc(400)) {
    margin-bottom: 112%;

    .button + .button {
      margin-left: rem-calc(10);
    }
  }

  @media (min-width: 376px) {
    .button + .button {
      margin-left: rem-calc(10);
    }
  }

  @include medium-home {
    max-width: 80%;
    margin: rem-calc(90) 0 rem-calc(400);
  }

  @media (max-width: 940px) and (min-width: $home-medium-breakpoint) {
    max-width: 50%;
    margin: rem-calc(90) 0 rem-calc(150);
  }

  @media (min-width: 941px) {
    max-width: 55%;
    margin: rem-calc(94) 0 rem-calc(180);

    .community & {
      max-width: 50%;
    }
  }

  @include section-left-margin;
}

.hero--heading {
  font-size: rem-calc(36);

  @include small-home {
    font-size: rem-calc(20);
  }
}

.hero--text {
  margin-bottom: rem-calc(40);

  & + .hero--text {
    margin-top: rem-calc(-20px);
  }
}

.hero--graphic {
  position: absolute;
  bottom: rem-calc(-100);
  z-index: 3;
  overflow: hidden;
  right: 0;

  & > img {
    position: relative;
    right: -40px;

    @media (max-width: 420px) {
      left: -10%;
    }
  }

  @include small-home {
    width: 100%;
    text-align: center;

    & > img {
      position: relative;
      width: 120%;
      max-width: 450px;
      right: 0;
    }

    .community & {
      bottom: rem-calc(-50);
    }
  }
}

// Sub hero
$sub-hero-skew: 5deg;

.sub-hero {
  position: relative;
  z-index: 2;
  padding: rem-calc(120) 0 rem-calc(120);
  margin-top: rem-calc(-100);
  background-image: linear-gradient(240deg, $hab-blue-grey, darken($hab-blue-grey, 5%));
  color: $white;
  transform: skewY(-($sub-hero-skew));

  &:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 4px;
    background-image: linear-gradient(to right, $hab-green, $hab-blue-grey);
  }

  @include small-home {
    padding-bottom: rem-calc(90);
  }

  &.community {
    padding-bottom: rem-calc(200);
    margin-bottom: rem-calc(-100);
  }
}

.sub-hero--content {
  position: relative;
  transform: skewY($sub-hero-skew);
  @include section-left-margin;
}

.sub-hero--heading,
.sub-hero--blurb {
  position: relative;
  z-index: 3;
}

.sub-hero--heading {
  margin: rem-calc(90) 5% rem-calc(60);
  @extend %section-heading;

  @include breakpoint(medium) {
    margin: 0 auto rem-calc(60);
  }
}

.sub-hero--icon {
  margin-bottom: rem-calc(20);
}

.sub-hero--blurb {
  @include small-home {
    padding: 0 8%;
    margin-bottom: 5%;
  }

  p {
    color: darken($white, 15%);
  }
}

.sub-hero--blurb-title {
  h4 {
    display: inline-block;
    margin-left: rem-calc(15);
    vertical-align: middle;
  }
}

.sub-hero--graphic {
  position: absolute;
  z-index: 2;
  left: 0.9375rem;
  top: rem-calc(-200);

  @include small-home {
    width: 90%;
    top: rem-calc(-215);
  }
}

.sub-hero--button {
  @include button;
  color: $white;
  margin: rem-calc(40) 0 rem-calc(-35);

  @include small-home {
    margin: rem-calc(20) 0 0 5%;
    max-width: rem-calc(240);
  }
}

// Main section
.main-section {

  &.first {
    padding-top: rem-calc(160);
    margin-top: rem-calc(-20);
    background: url('/images/graphics/main-section-first-watermark.svg') no-repeat center rem-calc(-160);

    h2 {
      margin-bottom: rem-calc(60);

      &.use-cases--title {
        margin: 0 rem-calc(30) rem-calc(60);      
      }
    }
  }

  &.last {
    padding: 0 5% rem-calc(60);
  }

  h2 {
    @extend %section-heading;
  }

  @include small-home {
    padding: 0;

    &.first {
      margin-top: rem-calc(-17);
      background-position: center rem-calc(-50);
      background-size: rem-calc(410) auto;
      padding-top: rem-calc(120);
    }
  }
}

.main-section--blurb {
  width: 100%;
  max-width: rem-calc(500);
  margin: 0 auto rem-calc(90);

  @include large-home {
    margin: 0 0 rem-calc(120) rem-calc(104);;
  }
}

.main-section--collaboration-icon {
  max-width: rem-calc(86);
}

// Use cases section
.use-cases--wrap {
  padding: 0 rem-calc(10);
}
.use-cases--box {
  @include shadow-float;
  background-color: $hab-white;
  border-radius: $global-radius;
  min-height: rem-calc(460);
  position: relative;
  transform: scale(1);
  transition: all .1s;

  h4, p {
    text-align: left;
  }

  h4 {
    border-bottom: 1px solid $hab-gray-light;
    font-size: rem-calc(16);
    padding: rem-calc(24) rem-calc(30) rem-calc(20);
  }

  p {
    font-size: rem-calc(14);
    padding: rem-calc(10) rem-calc(30) 0;
  }

  &:hover {
    transform: scale(1.02);
    transition: all .2s;
  }

  @include breakpoint(large) {
    min-height: rem-calc(390);
  };
}

.use-cases--box-footer {
  background-color: $hab-green;
  border-radius: 0 0 $global-radius $global-radius;
  bottom: 0;
  padding: rem-calc(20) rem-calc(30);
  position: absolute;
  text-align: right;
  width: 100%;

  a {
    color: $hab-white;

    &:hover {
      border-bottom: 1px solid;
    }
  }

  a::after {
    content: "\2192";
    margin-left: rem-calc(8);
    transition: all .2s;
  }
}

.use-cases--icon {
  position: absolute;
  bottom: rem-calc(32);
  left: rem-calc(22);
}

// In Production Section
.production-wrap {
  padding: 0 5%;

  @include breakpoint(medium) {
    background-image: url('/images/graphics/main-section-last-watermark.svg');
    background-repeat: no-repeat;
    background-position: calc(50% + 270px) 100%;
    padding: rem-calc(30) 0;
  }
}
.production-wrap .production--blurb {
  margin-bottom: rem-calc(60);

  h2 {
    margin-bottom: rem-calc(30);
  }
}
.production--features-item {
  margin-bottom: rem-calc(60);
  position: relative;

  p {
    color: $hab-gray;
  }

  &.last-item {
    margin-bottom: 0;
  }
}
.production--icon {
  display: none;

  @include breakpoint(medium) {
    display: block;
    left: rem-calc(-45);
    position: absolute;
    top: rem-calc(-9);
  }
}

// Testimonials slider
$testimonials-slider-transition: 1s;

.testimonials-slider {
  position: relative;

  @include section-left-margin;
}

.testimonial {
  position: absolute;
  width: 100%;
  margin-bottom: rem-calc(30);
  opacity: 0;
  transition: opacity $testimonials-slider-transition ease;

  &.is-active {
    opacity: 1;
  }
}

@include breakpoint(medium) {
  .testimonial--image,
  .testimonial--blurb {
    display: inline-block;
    vertical-align: middle;
  }
}

.testimonial--image {
  position: relative;
  padding-bottom: 20px;

  & > img {
    display: block;
    width: 90%;
    max-width: 300px;
    margin: 0 auto;
  }

  @include breakpoint(medium) {
    width: 37.2%;
    margin-right: 1%;
    padding-bottom: 15%;

    & > img {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}

.testimonial--blurb {
  @include breakpoint(medium) {
    width: 60.8%;
  }
}

.testimonial--blurb--text {
  margin-bottom: rem-calc(20);
  font-style: italic;
  font-size: rem-calc(18);
}

.testimonial--blurb--attr {
  display: block;
  margin-bottom: rem-calc(20);
  font-size: rem-calc(13);
  font-family: $header-font-family;
}

.testimonials--nav {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

.testimonials--nav--dot {
  cursor: pointer;
  display: inline-block;
  width: rem-calc(14);
  height: rem-calc(14);
  padding: rem-calc(4);
  margin-right: rem-calc(12);
  transition: all $testimonials-slider-transition ease;
  border-radius: 50%;
  background: $hab-gray-dark;
  box-shadow: 0 0 0 3px $white,
    0 0 0 4px transparent;

  &:first-child {
    margin-left: rem-calc(-90);
  }

  &.is-active {
    box-shadow: 0 0 0 3px $white,
      0 0 0 4px $hab-orange-dark;
    background: $hab-orange-dark;
  }
}
